<template>
  <el-dialog
    ref="customDialog"
    v-model="dialogVisible"
    :class="[
      'nw-dialog',
      'nw-center-dialog',
      className,
      stretch ? 'resizable-dialog' : ''
    ]"
    :title="title"
    :width="dialogWidth"
    :style="{ width: dialogWidth + 'px', height: dialogHeight + 'px' }"
    :append-to-body="appendToBody"
    :destroy-on-close="destroyOnClose"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :="$attrs"
  >
    <template #header>
      <slot name="header" />
    </template>
    <slot />
    <template #footer>
      <slot name="footer" />
    </template>
    <div v-if="stretch" class="resize-handle" @mousedown="startResize"></div>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  className: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: g_t('public.tip')
  },
  width: {
    type: String,
    default: '50%'
  },
  minWidth: {
    type: String,
    default: '500px'
  },
  maxWidth: {
    type: String,
    default: '1200px'
  },
  appendToBody: {
    // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
    type: Boolean,
    default: true
  },
  destroyOnClose: {
    // 关闭时销毁 Dialog 中的元素
    type: Boolean,
    default: true
  },
  closeOnClickModal: {
    type: Boolean,
    default: false
  },
  closeOnPressEscape: {
    type: Boolean,
    default: false
  },
  stretch: {
    // 自定义属性: 是否可以拉伸缩放
    type: Boolean,
    default: false
  }
})
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const customDialog = ref(null)
const dialogWidth = ref(props.width)
const dialogHeight = ref('auto') // 初始高度
const minHeight = 200 // window.innerHeight * 0.5
let isResizing = false
let startX, startY, startWidth, startHeight

onMounted(() => {
  resizeHandler()
  window.addEventListener('resize', resizeHandler)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
})

const resizeHandler = () => {
  dialogWidth.value = props.width
  nextTick(() => {
    let width = document.querySelector('.el-dialog')?.offsetWidth || 0
    if (props.width === 'auto') width = window.innerWidth * 0.75
    if (width > parseInt(props.maxWidth)) width = props.maxWidth
    if (width < parseInt(props.minWidth)) width = props.minWidth
    dialogWidth.value = `${parseInt(width)}px`
  })
}

// 开始调整大小
const startResize = event => {
  // 防止请求的数据扩充界面高度
  const dialogEl = customDialog.value.dialogContentRef.$el // 获取 el-dialog 的根 DOM 元素
  const style = dialogEl.getBoundingClientRect() // 获取计算后的样式
  dialogHeight.value = style.height

  isResizing = true
  startX = event.clientX
  startY = event.clientY
  startWidth = parseInt(dialogWidth.value)
  startHeight = dialogHeight.value

  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', stopResize)
}

// 鼠标移动时调整大小
const handleMouseMove = event => {
  if (isResizing && props.stretch) {
    const deltaX = event.clientX - startX
    const deltaY = event.clientY - startY
    dialogWidth.value = Math.max(startWidth + deltaX, parseInt(props.minWidth)) // 最小宽度为 props.minWidth
    dialogHeight.value = Math.max(startHeight + deltaY, minHeight) // 最小高度为 200
  }
}

// 停止调整大小
const stopResize = () => {
  isResizing = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', stopResize)
}

defineExpose({
  customDialog
})
</script>

<style lang="scss">
.el-dialog.nw-dialog {
  padding: 0;
  .el-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-dialog__headerbtn {
      position: relative;
      top: 0;
      right: 0;
      height: 16px;
    }
  }
  // 表格高度设置
  .el-table {
    height: auto;
  }
}
// 设置弹框页面居中，内容自适应显示，可出现滚动条
.el-dialog.nw-center-dialog {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 50px);
  max-height: calc(100% - 50px);
  margin: 0 !important;
  .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    @extend .custom-scrollbar;
  }
}

.resize-handle {
  cursor: se-resize;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background-color: #ccc;
}
</style>
